<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../../css/api.css"/>
      <style>
      body{margin: 0}
      h1,h2,h3,h4,h5,h6{font-weight: normal;}
    section{padding:20px 0;box-sizing: border-box;;width: 100%;padding-top:5px}
    section .col{padding: 0 15px;width: 100%;position: relative;;box-sizing:border-box;padding-bottom: 15px;border-bottom:5px solid #F5F5F5}
    section .col h4{font-size: 14px;line-height: 14px;color: #333;margin-bottom:8px;display: inline-block;margin-right: 14px;}
      section .col img{width: 50px;height: 13px;display: inline-block;}
    section .col h5{font-size: 12px;color: #999;line-height: 13px;margin-top:0;margin-bottom: 10px;}
    section .col .time h6{font-size:12px;line-height:12px;color: #ccc;position: absolute;right:15px;top: 3px;margin: 0}
    section .col .input button{border: 0;background-color: transparent;outline: none;border-radius: 0;height: 21px;background-color:#f8f8fa;text-align: center;line-height: 21px;display: inline-block;;margin-right: 5px;padding:0px 8px;box-sizing: border-box;color: #999;text-transform: uppercase;}
      </style>
  </head>
  <body>
<section id="joinitem">
  <div v-for="site in joinitem">
<div class="col"  title="{{site.id}}" @click="show_cyxm(site.id)">
  <h4>{{site.name}}</h4>
  <h5>{{site.title}}&nbsp;&nbsp;&nbsp;{{site.type}}</h5>
  <div class="time"><h6>{{site.time}}</h6></div>
  <div class="input">
<button type="button" >{{site.renshu}}人已参与</button>
<button type="button" >{{site.gongqi}}天工期</button>

  </div>
</div>
</div>
</section>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
      <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript">
      apiready = function(){
       joinitema = new Vue({
                   el: '#joinitem',
                      data: $tools.getdata()
                 })
                 $tools.datarefresh(joinitema);

api.showProgress({
    style: 'default',
    animationType: 'fade',
    title: '努力加载中...',
    text: '先喝杯茶...',
    modal: false
});

                 api.setRefreshHeaderInfo({
                     loadingImg: 'widget://image/refresh.png',
                     bgColor: '#fff',
                     textColor: '#333',
                     textDown: '下拉刷新...',
                     textUp: '松开刷新...'
                 }, function(ret, err) {
                   ajax();

                 });
                 //上拉更多
                 api.addEventListener({
                       name:'scrolltobottom',
                       extra:{
                           threshold:50            //设置距离底部多少距离时触发，默认值为0，数字类型
                       }
                   },function(ret,err){
                     limt+=8;
                       ajax();
                       api.showProgress({
                           style: 'default',
                           animationType: 'fade',
                           title: '努力加载中...',
                           text: '先喝杯茶...',
                           modal: false
                       });


                   });
        ajax();

      };
      var joinitema;
      var limt = 8;

     function show_cyxm(id){
      api.openWin({
          name: 'cyxmshow_win',
          url: 'cyxmshow_win.html',
          pageParam: {
              id: id
          }
      });


     }



  function  ajax(){

    api.ajax({
        url: $api.getStorage("backapi")+'/index.php?s=xiangmu&c=home&m=mefabu&uid='+$api.getStorage("member")+'&limt='+limt,
        method: 'get',
    },function(ret, err){
        if (ret) {
          joinitem.joinitem = ret.status;
          $tools.setData("joinitem",ret.status);

        } else {
            console.log( JSON.stringify( err ) );
        }
        api.refreshHeaderLoadDone()
        api.hideProgress();
    });



  }
  </script>
  </html>
